/*
 * @Description: 搜索框组件
 * @Author: 姚泽毅
 * @Date: 2021-08-29 16:31:07
 * @LastEditTime: 2021-08-30 08:49:22
 */
import React, { Component } from 'react'
import { Input, message } from 'antd'
// import axios from 'axios'
import PubSub from 'pubsub-js'
import "./index.css"
const { Search } = Input

export default class Header extends Component {
    searchUsers = async (value) => {
        if (value.trim() === "") {
            this.searchVal.input.value = "";
            return
        }
        PubSub.publish("changeState", { isFirstLoad: false, isLoading: true, isErr: "", users: [] })
        //#region 
        let url = "https://api.github.com/search/users";
        axios.get(url, {
            params: {
                q: value
            }
        }).then(res => {
            if (res.status === 200) {
                PubSub.publish("changeState", { users: res.data.items, isLoading: false })
            } else {
                PubSub.publish("changeState", { isLoading: false, isErr: " 搜索失败！" })
                message.error("搜索失败！");
                console.log(res);
            }
        }, function (err) {
            PubSub.publish("changeState", { isLoading: false, isErr: err.message })
            message.error("搜索失败！")
            console.log(err);
        })
        //#endregion

        //#region 
        //内置fetch写法(未优化)
        /*  fetch(`/search/users?q=${value}`).then(
             res => {
                 console.log("联系服务器成功了");
                 return res.json()
             },
             err => {
                 PubSub.publish("changeState", { isLoading: false, isErr: "网络已断开" })
                 message.error("网络已断开");
                 return new Promise(() => { })
             }
         ).then(
             res => {
                 if (res.items) {
                     PubSub.publish("changeState", { users: res.items, isLoading: false })
                 }
                 else {
                     PubSub.publish("changeState", { isLoading: false, isErr: " 搜索失败！" })
                     message.error("搜索失败！");
                     console.log(res);
                 }
             },
             err => {
                 PubSub.publish("changeState", { isLoading: false, isErr: err.message })
                 message.error("搜索失败！")
                 console.log(err);
             }
         ) */
        //#endregion

        //#region
        //内置fetch写法(优化)
        /* fetch(`/search/users?q=${value}`).then(
            res => {
                console.log("联系服务器成功了");
                return res.json()
            }
        ).then(
            res => {
                PubSub.publish("changeState", { users: res.items, isLoading: false })
            }
        ).catch(err => {
            PubSub.publish("changeState", { isLoading: false, isErr: err.message })
            message.error("搜索失败！")
            console.log(err);
        }) */
        //#endregion

        //#region
        //内置fetch写法(精简)
        /*  try {
             const res = await fetch(`/search/users?q=${value}`);
             const data = await res.json();
             PubSub.publish("changeState", { users: data.items, isLoading: false })
         } catch (error) {
             PubSub.publish("changeState", { isLoading: false, isErr: error.message })
             message.error("搜索失败！")
             console.log(error);
         } */
        //#endregion
    };
    render() {
        return (
            <div className="header">
                <h1>搜索GitHub用户</h1>
                <Search ref={c => this.searchVal = c} style={{ width: 600 }} onSearch={this.searchUsers} size="large" enterButton allowClear placeholder="input search user" />
            </div>
        )
    }
}
